import React from "react";
import {AutoCenter, Badge, Button, Card, Divider, ErrorBlock, Grid, Image, Space, Toast} from 'antd-mobile'
import {UnorderedListOutline,CheckCircleOutline,FileOutline,UserAddOutline,UserSetOutline,UserContactOutline,HistogramOutline,TagOutline,ExclamationShieldOutline,UserCircleOutline} from 'antd-mobile-icons'
import './MainPage.css'
import cookie from "_react-cookies@0.1.1@react-cookies";
import {Link} from "react-router-dom";
import TimeEntrusted from "./TimeEntrusted";



export default class MainPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showElem:false,
            phone:''
        }
    }

    // getPlanList = ()=>{
    //
    //     const url3 ='http://localhost:8080/dc14/construct/plan/dailyplanList?date=20220407';
    //     fetch(url3,{method:"GET"
    //     })
    //         .then(res=>res.json()).then(result=>{
    //        console.log(result[31])
    //     })
    //
    // }

    toSign = () => {
        this.props.history.push('/sign')
    }

    toDailyPlan = () => {
        this.props.history.push('/dailyplan')
    }

    toCheckSign =() =>{
        this.props.history.push("/checksign")
    }
    toEntrust =() =>{
        // Toast.show({
        //     content: '正在建设中....',
        //     icon: <ExclamationShieldOutline />,
        // })
        this.props.history.push('/entrust')
    }
    toRegister =() =>{

        Toast.show({
            content: '正在建设中....',
            icon: <ExclamationShieldOutline />,
        })
        // this.props.history.push('/register')
    }

    toCheckEntrust = ()=>{
        this.props.history.push('/checkentrust')
    }

    toCheckTimeEntrusted = ()=>{
        this.props.history.push('/checktimeentrusted')
    }

    toTimeEntrusted = ()=>{
        this.props.history.push('/timeentrusted')
    }

    componentDidMount() {


        document.title='主页菜单'
        // window.addEventListener('popstate', function () {
        //     this.history.pushState(null, null, document.URL);
        // });



        const url3 ='http://htjoa.nrnet.cn/dc14/construct/proxy/newproxy?phone='+this.state.phone;
        fetch(url3,{method:"GET"
        })
            .then(res=>res.json()).then(result=>{
            if (result["code"]=="200"){
                const messageNumber =result["messageNumber"]
                if (messageNumber != 0){
                    this.setState({showElem:true})
                }
            }
        })
    }



    render() {

        return (
            <div style={{  height:"100%",position:"absolute",width:"100%"}}>
               <div style={{padding: '10px',}}>
                <Card>
                    <Grid columns={3} gap={8}>
                        <Grid.Item >
                            <Image
                                        src= {cookie.load("avatar")}
                                        width={85}
                                        height={85}
                                        fit='cover'
                                        style={{ borderRadius: 4 }}
                                    />

                        </Grid.Item>
                        <Grid.Item span={2} >
                            <div>

                            <Grid columns={1} gap={8}>
                                <Grid.Item span={1} style={{margin:"0px"}}>
                                    <h2>{cookie.load("name")}</h2>   <h4>{cookie.load("phone")}</h4>
                                </Grid.Item>

                            </Grid>
                            </div>

                        </Grid.Item>



                    </Grid>


                    {/*<Grid columns={2} gap={8}>*/}
                    {/*    <Grid.Item span={5}>*/}
                    {/*        <Image*/}
                    {/*            src='https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLvdkH0jmPBlkdfcA5vJ0ia5sohWcuWKLdJs0layBbck6O7JOibNhsujn2WTHia7Mhj33Rib273QYayew/132'*/}
                    {/*            width={64}*/}
                    {/*            height={64}*/}
                    {/*            fit='cover'*/}
                    {/*            style={{ borderRadius: 4 }}*/}
                    {/*        />*/}
                    {/*    </Grid.Item>*/}

                    {/*    <Grid.Item span={12}>*/}
                    {/*        <Grid>*/}
                    {/*            <Grid.Item span={24}>*/}

                    {/*            </Grid.Item>*/}
                    {/*            <Grid.Item>*/}
                    {/*            </Grid.Item>*/}
                    {/*        </Grid>*/}

                    {/*    </Grid.Item>*/}
                    {/*</Grid>*/}




                    {/*<Divider*/}
                    {/*    contentPosition='right'*/}
                    {/*    style={{*/}
                    {/*        color: '#1677ff',*/}
                    {/*        borderColor: '#1677ff',*/}
                    {/*        borderStyle: 'dashed',*/}
                    {/*        margin: '0px'*/}
                    {/*    }}>*/}
                    {/*</Divider>*/}
                </Card>

                <Card title='打卡管理:' style={{marginTop: "10px"}}>

                    <AutoCenter>
                        <Space justify='center' style={{'--gap': '20px'}}>
                            <Card onBodyClick={this.toSign} style={{width: "120px" }} bodyStyle={{borderStyle:'',borderRadius:'10px',borderColor:"#f5f5f6"}}>
                                <AutoCenter>
                                    <CheckCircleOutline color='#76c6b8' fontSize={48}/>
                                    <br/>
                                    <AutoCenter>
                                        签到签退
                                    </AutoCenter>
                                </AutoCenter>
                            </Card>

                            <Card onBodyClick={this.toCheckSign} style={{width: "120px"}} bodyStyle={{borderStyle:'',borderRadius:'10px',borderColor:"#f5f5f6"}}>
                                <AutoCenter>
                                    <FileOutline color="#E6B859FF"  fontSize={48}/>
                                    <br/>
                                    <AutoCenter>
                                        查看打卡
                                    </AutoCenter>
                                </AutoCenter>
                            </Card>
                        </Space>
                    </AutoCenter>

                </Card>
                <Card title='委托管理:' style={{marginTop: "10px"}}>

                    <AutoCenter>
                        <Space justify='center' style={{'--gap': '20px'}}>
                            <Card onBodyClick={this.toEntrust} style={{width: "120px"}} bodyStyle={{borderStyle:'',borderRadius:'10px',borderColor:"#f5f5f6"}}>
                                <AutoCenter>
                                    <UserAddOutline  color='#1677ff' fontSize={48}/>
                                </AutoCenter>
                                    <AutoCenter>
                                        创建单次委托
                                    </AutoCenter>

                            </Card>

                            <Card onBodyClick={this.toCheckEntrust} style={{width: "120px"}} bodyStyle={{borderStyle:'',borderRadius:'10px',borderColor:"#b05154"}}>
                                <AutoCenter>
                                    {
                                        this.state.showElem?(
                                                <Badge content="新">
                                                    <UserSetOutline color="#b05154"  fontSize={48}/>
                                                </Badge>
                                        ):<UserSetOutline color="#b05154"  fontSize={48}/>
                                    }
                                </AutoCenter>

                                    <AutoCenter>
                                        查看单次委托
                                    </AutoCenter>

                            </Card>
                        </Space>

                        <Divider />

                        <Space justify='center' style={{'--gap': '20px'}}>
                            <Card onBodyClick={this.toTimeEntrusted} style={{width: "120px"}} bodyStyle={{borderStyle:'',borderRadius:'10px',borderColor:"#f5f5f6"}}>
                                <AutoCenter>
                                    <UserAddOutline  color='#d2b116' fontSize={48}/>
                                </AutoCenter>
                                <AutoCenter>
                                        创建阶段性委托
                                </AutoCenter>
                            </Card>

                            <Card onBodyClick={this.toCheckTimeEntrusted} style={{width: "120px"}} bodyStyle={{borderStyle:'',borderRadius:'10px',borderColor:"#b05154"}}>
                                <AutoCenter>

                              <UserSetOutline color="#66c18c"  fontSize={48}/>
                                </AutoCenter>
                                    <AutoCenter>
                                        查看阶段性委托
                                    </AutoCenter>

                            </Card>
                        </Space>
                    </AutoCenter>
                </Card>




                <Card title='培训管理:' style={{marginTop: "10px"}}>

                    <AutoCenter>
                        <Space justify='center' style={{'--gap': '20px'}}>
                            <Card onBodyClick={this.toRegister} style={{width: "120px"}} bodyStyle={{borderStyle:'',borderRadius:'10px',borderColor:"#9970a8"}}>
                                <AutoCenter>
                                    <HistogramOutline  color='#fe9778' fontSize={48}/>
                                    <br/>
                                    <AutoCenter>
                                        报名培训
                                    </AutoCenter>
                                </AutoCenter>
                            </Card>

                            <Card onBodyClick={this.toRegister} style={{width: "120px"}} bodyStyle={{borderStyle:'',borderRadius:'10px',borderColor:"#b05154"}}>
                                <AutoCenter>
                                    <TagOutline color="#9970A8FF"  fontSize={48}/>
                                    <br/>
                                    <AutoCenter>
                                        查看证书
                                    </AutoCenter>
                                </AutoCenter>
                            </Card>
                        </Space>
                    </AutoCenter>
                </Card>
                   <Card title='计划管理:' style={{marginTop: "10px"}}>

                       <AutoCenter>
                           <Space justify='center' style={{'--gap': '20px'}}>
                               <Card onBodyClick={this.toDailyPlan} style={{width: "120px"}} bodyStyle={{borderStyle:'',borderRadius:'10px',borderColor:"#9970a8"}}>
                                   <AutoCenter>
                                       <UnorderedListOutline  color='#74759b' fontSize={48}/>
                                   </AutoCenter>
                                       <AutoCenter>
                                           日计划查询
                                       </AutoCenter>

                               </Card>

                               <Card onBodyClick={()=>{
                                   cookie.save("phone", "15279189843");
                                   Toast.show(cookie.load("phone"))
                               }} style={{width: "120px"}} bodyStyle={{borderStyle:'',borderRadius:'10px',borderColor:"#b05154"}}>
                                   <AutoCenter>
                                       <br/>
                                       <AutoCenter>
                                       </AutoCenter>
                                   </AutoCenter>
                               </Card>
                           </Space>
                       </AutoCenter>
                   </Card>

               </div>
            </div>
        )
    }
}